<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>会员管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/business/style/base.css" />
<link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/business/style/style.css" />
<link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/business/style/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/business/style/mui.min.css">
<script type="text/javascript" charset="UTF-8" src="{:C('WEB_URL')}Public/business/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="{:C('WEB_URL')}Public/business/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="{:C('WEB_URL')}Public/business/js/script.js"></script>
</head>
<body>
<div id="box">
 <header class="mui-bar mui-bar-nav">
  <div class="navbar navbar-default navbar-fixed-top">
  <header>
   <h1><a href="index.html"><span class="glyphicon glyphicon-menu-left"></span></a></h1>
   <p class="title"><input type="text" placeholder="搜索会员账号/昵称" class="dealSeek"></p>
   <h6><!--<img src="images/manage_03.jpg" />--><a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a></h6>
  </header>
 </div><!--navbar-fixed-top-->
 </header>
 <div class="mui-content wrap">
  <div id="slider" class="mui-slider mui-fullscreen" style="width:100%;max-width:640px;margin:0 auto">
   <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
	<ul id="memHear">
     <li class="current"><a class="mui-control-item mui-active" href="#item1mobile">日期排序</a></li>
     <li class="hearLi action"><a class="mui-control-item" href="#item2mobile">账号排序</a></li>
     <li class="action"><a class="mui-control-item" href="#item3mobile">消费优先</a></li>
    </ul>
   </div>
   <div class="mui-slider-group" style="margin-top:20px;">
	<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
	 <div id="scroll1" class="mui-scroll-wrapper">
	  <div class="mui-scroll">
	   <ul class="mui-table-view">
		<li class="mui-table-view-cell" id="info">
		 <div class="alo">
	      <p class="aloManage"><img src="images/manage_07.jpg" />1天后生日</p>
	     <div class="aloLeft">
	      <img src="images/member_03.jpg" />
	     </div><!--aloLeft-->
	     <div class="aloCenter">
	      <p class="memberName">tony</p>
	      <p>NO.18017744567</p>
	     </div><!--aloCenter-->
	     <div class="aloRight">
	      <p>5天前来过</p>
	      <p>近三个月消费4次</p>
	     </div><!--aloRight-->
	      <p class="aloManage"><img src="images/manage_11.jpg" />会员折扣还剩：8次 <span>卡片有效期还剩：23天</span></p>
	     </div><!--alo-->
	   </li>
	    <li class="mui-table-view-cell" id="info">
		 <div class="alo">
	      <p class="aloManage"><img src="images/manage_07.jpg" />10天后生日</p>
	     <div class="aloLeft">
	      <img src="images/member_03.jpg" />
	     </div><!--aloLeft-->
	     <div class="aloCenter">
	      <p class="memberName">rose</p>
	      <p>NO.15664880267</p>
	     </div><!--aloCenter-->
	     <div class="aloRight">
	      <p>1天前来过</p>
	      <p>近三个月消费2次</p>
	     </div><!--aloRight-->
	      <p class="aloManage"><img src="images/manage_11.jpg" />会员折扣还剩：3次 <span>卡片有效期还剩：12天</span></p>
	     </div><!--alo-->
	   </li>
		<li class="mui-table-view-cell" id="info">
		 <div class="alo">
	      <p class="aloManage"><!--<img src="images/manage_07.jpg" />3天后生日--></p>
	     <div class="aloLeft">
	      <img src="images/member_03.jpg" />
	     </div><!--aloLeft-->
	     <div class="aloCenter">
	      <p class="memberName">robin</p>
	      <p>NO.15658829178</p>
	     </div><!--aloCenter-->
	     <div class="aloRight">
	      <p>7天前来过</p>
	      <p>近三个月消费1次</p>
	     </div><!--aloRight-->
	      <p class="aloManage"><img src="images/manage_11.jpg" />会员折扣还剩：1次 <span>卡片有效期还剩：21天</span></p>
	     </div><!--alo-->
	   </li>
		<li class="mui-table-view-cell" id="info">
		 <div class="alo">
	      <p class="aloManage"><img src="images/manage_07.jpg" />5天后生日</p>
	     <div class="aloLeft">
	      <img src="images/member_03.jpg" />
	     </div><!--aloLeft-->
	     <div class="aloCenter">
	      <p class="memberName">anne</p>
	      <p>NO.18047688234</p>
	     </div><!--aloCenter-->
	     <div class="aloRight">
	      <p>4天前来过</p>
	      <p>近三个月消费2次</p>
	     </div><!--aloRight-->
	      <p class="aloManage"><img src="images/manage_11.jpg" />会员折扣还剩：4次 <span>卡片有效期还剩：25天</span></p>
	     </div><!--alo-->
	   </li>
	   </ul>
	  </div>
	 </div>
	</div>
	<div id="item2mobile" class="mui-slider-item mui-control-content">
	 <div class="mui-scroll-wrapper">
	  <div class="mui-scroll">
	   <ul class="mui-table-view">
		<li class="mui-table-view-cell" id="info">
		 <div class="alo">
	      <p class="aloManage"><!--<img src="images/manage_07.jpg" />3天后生日--></p>
	     <div class="aloLeft">
	      <img src="images/member_03.jpg" />
	     </div><!--aloLeft-->
	     <div class="aloCenter">
	      <p class="memberName">ben</p>
	      <p>NO.18353870296</p>
	     </div><!--aloCenter-->
	     <div class="aloRight">
	      <p>8天前来过</p>
	      <p>近三个月消费5次</p>
	     </div><!--aloRight-->
	      <p class="aloManage"><img src="images/manage_11.jpg" />会员折扣还剩：2次 <span>卡片有效期还剩：33天</span></p>
	     </div><!--alo-->
	   </li>
	   <li class="mui-table-view-cell" id="info">
		 <div class="alo">
	      <p class="aloManage"><img src="images/manage_07.jpg" />6天后生日</p>
	     <div class="aloLeft">
	      <img src="images/member_03.jpg" />
	     </div><!--aloLeft-->
	     <div class="aloCenter">
	      <p class="memberName">rose</p>
	      <p>NO.13157648367</p>
	     </div><!--aloCenter-->
	     <div class="aloRight">
	      <p>3天前来过</p>
	      <p>近三个月消费5次</p>
	     </div><!--aloRight-->
	      <p class="aloManage"><img src="images/manage_11.jpg" />会员折扣还剩：8次 <span>卡片有效期还剩：2天</span></p>
	     </div><!--alo-->
	   </li>
	   </ul>
	  </div>
	 </div>
	</div>
	<div id="item3mobile" class="mui-slider-item mui-control-content">
	 <div class="mui-scroll-wrapper">
	  <div class="mui-scroll">
	   <ul class="mui-table-view">
		<li class="mui-table-view-cell" id="info">
		 <div class="alo">
	      <p class="aloManage"><img src="images/manage_07.jpg" />18天后生日</p>
	     <div class="aloLeft">
	      <img src="images/member_03.jpg" />
	     </div><!--aloLeft-->
	     <div class="aloCenter">
	      <p class="memberName">rose</p>
	      <p>NO.15698827640</p>
	     </div><!--aloCenter-->
	     <div class="aloRight">
	      <p>4天前来过</p>
	      <p>近三个月消费1次</p>
	     </div><!--aloRight-->
	      <p class="aloManage"><img src="images/manage_11.jpg" />会员折扣还剩：3次 <span>卡片有效期还剩：10天</span></p>
	     </div><!--alo-->
	  </li>
	   </ul>
	  </div>
	 </div>
	</div>
   </div>
  </div>
 </div>
 <div class="navbar navbar-default navbar-fixed-bottom">
   <footer id="foot">
    <dl>
     <dt><a href="index.html"><img src="images/index_06.jpg" /></a></dt>
     <dd><a href="index.html">首页</a></dd>
    </dl>
    <dl>
     <dt><a href="staffList.html"><img src="images/deal_07.jpg" /></a></dt>
     <dd><a href="staffList.html">员工管理</a></dd>
    </dl>
    <dl>
     <dt><a href="memManages.html"><img src="images/footer_02.jpg" /></a></dt>
     <dd><a href="memManages.html" class="current">会员管理</a></dd>
    </dl>
   </footer>
  </div><!--/navbar-->
</div><!--box-->
<div id="topPopover" class="mui-popover" style="width:160px;">
 <div class="mui-popover-arrow"></div>
 <div class="mui-scroll-wrapper">
  <div class="mui-scroll">
   <ul class="mui-table-view">
	<li class="mui-table-view-cell"><a href="discountErwei.html" class="manages"><img src="images/member_04.jpg" />扫我享折扣</a></li>
    <li class="mui-table-view-cell"><a href="payErwei.html" class="manages"><img src="images/member_06.jpg" />会员续费 </a></li>
	<li class="mui-table-view-cell"><a href="addMember.html" class="manages"><img src="images/member_10.jpg" />添加会员</a></li>
   </ul>
  </div>
 </div>
</div>
<script type="text/javascript" charset="UTF-8" src="./js/mui.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="./js/mui.pullToRefresh.js"></script>
<script type="text/javascript" charset="UTF-8" src="./js/mui.pullToRefresh.material.js"></script>
<script>
document.getElementById('info').addEventListener('tap', function() {
//打开关于页面
mui.openWindow({
url: 'memberDetails.html', 
id:'info'
});
});
//默认选中中间
$("#memHear .action").hover(function(){
	$(".current").css({border:"0",color:"#666"});
})
$("#memHear li.current").hover(function(){
	$("li.current").css({border:"0",color:"#666"});
})
//微信判断header是否显示
if(isWeiXin()){ 
//alert("====");
$(".title").hide();
} 
else{
//alert("+++++");
}

		mui.init();
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							down: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
										self.endPullDownToRefresh();
									}, 1000);
								}
							},
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.appendChild(createFragment(ul, index, 5));
										self.endPullUpToRefresh();
									}, 1000);
								}
							}
						});
					});
					var createFragment = function(ul, index, count, reverse) {
						var length = ul.querySelectorAll('li').length;
						var fragment = document.createDocumentFragment();
						var li;
						for (var i = 0; i < count; i++) {
							li = document.createElement('li');
							li.className = 'mui-table-view-cell';
							li.innerHTML = '<div class="alo"><p class="aloManage"><img src="images/manage_07.jpg" />3天后生日</p><div class="aloLeft"><img src="images/member_03.jpg" /></div><div class="aloCenter"><p class="memberName">rose</p><p>NO.18017744567</p></div><div class="aloRight"><p>5天前来过</p><p>近三个月消费5次</p></div><p class="aloManage"><img src="images/manage_11.jpg" />会员折扣还剩：3次 <span>卡片有效期还剩：33天</span></p></div>';
							fragment.appendChild(li);
						}
						return fragment;
					};
				});
			})(mui);


			//最下面点击效果
$('#foot dl').on("touchstart",function(){
  // alert(1);
  $('#foot dl').css("background-color","#fff")
  $(this).css("background-color","#ddd")
})
$('#foot dl').on("touchend",function(){
  // alert(1);
  $('#foot dl').css("background-color","#fff")

})
		</script>
	</body>
</html>